<template>
  <div>
    <el-card>
      <el-button type="primary" size="mini" style="margin: 0 0 25px 0" @click="onAdd('add')">添加区域</el-button>
      <!-- 表格 -->
      <el-table :data="list" size="mini" @row-click="tableRow">
        <el-table-column type="index" label="序号">
          <template #default="{$index}">
            {{ $index+1 +10*(params.page - 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="区域名称" width="200" />
        <el-table-column prop="spaceNumber" label="车位数（个）" width="200" />
        <el-table-column prop="areaProportion" label="面积（㎡）" />
        <el-table-column prop="ruleName" label="计费规则" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="text" @click="onAdd('edit',row.id)">编辑</el-button>
            <el-button type="text" @click="onDel(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>

    </el-card>
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination
        :page-size="params.pageSize"
        layout="total,  prev, pager, next,sizes, jumper"
        :total="total"
        :current-page="params.page"
        @current-change="changePage"
        @size-change="handleSizeChange"
      />
    </el-row>
    <!-- 弹出层 -->
    <edit-add ref="btnRef" :visible.sync="visible" @onSuccess="onload" />
  </div>
</template>

<script>
import { delDisAPI, getDistrictAPI } from '@/api/district'
import editAdd from './components/edit-add.vue'
export default {
  components: { editAdd },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        pageSize: 10
      },
      total: 1,
      visible: false

    }
  },
  created() {
    this.onload()
  },
  methods: {
    // 表格方法，方便数据回填
    tableRow(row, column, event) {
      // console.log(row)
      this.$refs.btnRef.formDate = {
        areaName: row.areaName,
        spaceNumber: row.spaceNumber,
        areaProportion: row.areaProportion,
        ruleId: row.ruleId,
        id: row.id
      }
      console.log(this.$refs.btnRef.formDate)
    },
    // 分页
    changePage(page) {
      this.params.page = page
      this.onload()
    },
    // 点击显示每页多少行
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.onload()
    },
    // 点击删除
    async onDel(id) {
      await this.$confirm('是否删除当前楼宇')
      await delDisAPI(id)
      this.$message.success('删除成功')
      // / 点击删除显示提示框 点击确定 删除 判断当前页是否删完 删完页码跳到前一页
      if (this.list.length === 1) {
        this.params.page--
      }
      this.onload()
    },
    // 获取编辑表单id 接收接口传回来的id
    // 点击编辑回填数据 在子组件定义一个方法把请求回来的数据传给定义的表单数据  在父组件点击后当前点击的id传给子组件定义的方法 实现回填数据
    // 点击添加按钮 显示弹框  判断是否是添加还是编辑
    async onAdd(type, id) {
      if (type === 'add') {
        this.visible = true
      }
      if (type === 'edit') {
        console.log(type)
        this.visible = true
        this.$refs.btnRef.formDate.id = id
      }
    },
    // 给编辑接口设置一个方法
    // async editAPI() {
    //   await editDisAPI(this.id)
    // },
    // 定义一个区域查询方法，方便复用
    async onload() {
      const res = await getDistrictAPI(this.params)
      this.list = res.data.rows
      this.total = res.data.total
    }
  }
}
</script>

<style>

</style>
